import { FormSchema, BasicColumn } from '@/components/Table';
import { Tag } from 'ant-design-vue';
import dayjs from 'dayjs';
import { h } from 'vue';

export const movieAddFormSchema: FormSchema[] = [
  {
    field: 'name',
    label: '站点名称',
    component: 'Input',
  },
  {
    field: 'urls[0]',
    label: '地址1',
    component: 'Input',
  },
  {
    field: 'urls[1]',
    label: '地址2',
    component: 'Input',
  },
  {
    field: 'urls[2]',
    label: '地址3',
    component: 'Input',
  },
];
export const movieUpdateFormSchema: FormSchema[] = [
  {
    field: 'name',
    label: '站点名称',
    component: 'Input',
  },
  {
    field: 'url',
    label: '地址',
    component: 'Input',
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'name',
    label: '站点名称',
    component: 'Input',
    colProps: { span: 5 },
  },
];

const statusMap: { [key: number]: { color: string; text: string } } = {
  0: { color: 'blue', text: '待检测' },
  1: { color: 'green', text: '正常' },
  2: { color: 'red', text: '禁用' },
  3: { color: 'purple', text: '异常' },
};
//电影列表
export function getMovieColumns(): BasicColumn[] {
  return [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 100,
    },
    {
      title: '站点名称',
      dataIndex: 'name',
      width: 150,
    },
    {
      title: '地址',
      dataIndex: 'url',
      customRender(opt) {
        // 新页面打开链接
        return h('a', { href: opt.value, target: '_blank' }, opt.value);
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 100,
      customRender(opt) {
        // 0:待检测，1:正常，2:禁用，3:有异常
        return h(Tag, { color: statusMap[opt.value].color }, () => statusMap[opt.value].text);
      },
    },
    {
      title: '状态说明',
      dataIndex: 'statusCommnet',
      ellipsis: true,
    },
    {
      title: '创建时间',
      width: 150,
      sorter: true,
      dataIndex: 'created_at',
      customRender(opt) {
        return dayjs(opt.value).format('YYYY-MM-DD HH:mm:ss');
      },
    },
    {
      title: '修改时间',
      width: 150,
      sorter: true,
      dataIndex: 'updated_at',
      customRender(opt) {
        return dayjs(opt.value).format('YYYY-MM-DD HH:mm:ss');
      },
    },
  ];
}
